import { _decorator, Color, Component, instantiate, Label, Node, Prefab, ScrollView, Sprite } from 'cc';
import { UIManager } from '../common/UIManager';
import { PrefabEnum } from '../common/PrefabEnum';
import { Rank, RankOper } from '../entity/Rank';
import RankApi from '../api/RankApi';
import { PlayerItem } from './PlayerItem';
import { AttackItem } from './AttackItem';
import { VillageItem } from './VillageItem';
import { UnionItem } from './UnionItem';
import { UIHeader } from '../common/UIHeader';
import { EventManager } from '../event/EventManager';
const { ccclass, property } = _decorator;

@ccclass('RankIndex')
export class RankIndex extends Component {
    @property(UIHeader)
    uiHeader:UIHeader
    @property(Node)
    player: Node
    @property(Node)
    village: Node
    @property(Node)
    union: Node
    @property(Node)
    attack: Node
    @property(Node)
    defense: Node
    @property(ScrollView)
    scrollView: ScrollView
    @property(Node)
    content: Node
    @property(Prefab)
    playerItem: Prefab
    @property(Prefab)
    villageItem: Prefab
    @property(Prefab)
    unionItem: Prefab
    @property(Prefab)
    attackItem: Prefab

    private oper: RankOper
    private page: number = 1
    private total: number = 1000
    private size:number = 20
    start() {
        this.uiHeader.setData('排行榜')
        EventManager.instance.on('排行榜close', this.onClose, this)
       
        this.player.on(Node.EventType.TOUCH_END, this.onPlayer, this)
        this.village.on(Node.EventType.TOUCH_END, this.onVillage, this)
        this.union.on(Node.EventType.TOUCH_END, this.onUnion, this)
        this.attack.on(Node.EventType.TOUCH_END, this.onAttack, this)
        this.defense.on(Node.EventType.TOUCH_END, this.onDefense, this)

        this.scrollView.node.on('scroll-to-top', () => {
            console.log('scroll-to-top....')
        }, this);
        this.scrollView.node.on('scroll-to-bottom', this.scrollToBottom, this);

        this.onPlayer()
    }

    onPlayer() {
        this.oper = RankOper.Player
        this.setActive(this.player)
        this.content.destroyAllChildren()
        let node = instantiate(this.getPrefab())
        this.content.addChild(node)
        this.scrollView.scrollToTop()
        this.getList(1)
    }
    onVillage() {
        this.oper = RankOper.Village
        this.setActive(this.village)
        this.content.destroyAllChildren()
        let node = instantiate(this.getPrefab())
        this.content.addChild(node)
        this.scrollView.scrollToTop()
        this.getList(1)
    }
    onUnion() {
        this.oper = RankOper.Union
        this.setActive(this.union)
        this.content.destroyAllChildren()
        let node = instantiate(this.getPrefab())
        this.content.addChild(node)
        this.scrollView.scrollToTop()
        this.getList(1)
    }
    onAttack() {
        this.oper = RankOper.Attack
        this.setActive(this.attack)
        this.content.destroyAllChildren()
        let node = instantiate(this.getPrefab())
        this.content.addChild(node)
        this.scrollView.scrollToTop()
        this.getList(1)
    }
    onDefense() {
        this.oper = RankOper.Defense
        this.setActive(this.defense)
        this.content.destroyAllChildren()
        let node = instantiate(this.getPrefab())
        this.content.addChild(node)
        this.scrollView.scrollToTop()
        this.getList(1)
    }

    async getList(page) {
        this.page = page

        let params = {
            oper: this.oper,
            page: page
        }
        await UIManager.instance.showLoading()
        let res = await RankApi.Execute(params)
        UIManager.instance.closeLoading()
        let list = res.data.list
        this.total = res.data.total
        console.log(list)
        for (let i = 0; i< list.length; i++) {

            let node = instantiate(this.getPrefab())
            this.content.addChild(node)

            let rank = Rank.createByData(list[i])
            rank.Index = i+ 1 + (this.page - 1) * this.size
            this.setItemData(node, rank)
        }
    }

    scrollToBottom(){
        if(this.page* this.size >= this.total){
            UIManager.instance.tip('没有更多了')
            return
        }

        this.page ++
        this.getList(this.page)
    }

    setItemData(node:Node, rank:Rank){
        switch (this.oper) {
            case RankOper.Player:
                node.getComponent(PlayerItem).setData(rank)
                break
            case RankOper.Attack:
                node.getComponent(AttackItem).setData(rank, RankOper.Attack)
                break
            case RankOper.Defense:
                node.getComponent(AttackItem).setData(rank, RankOper.Defense)
                break
            case RankOper.Village:
                node.getComponent(VillageItem).setData(rank)
                break
            case RankOper.Union:
                node.getComponent(UnionItem).setData(rank)
                break
            case RankOper.Area:

                break
            case RankOper.Activity:

                break
        }
    }

    getPrefab(): Prefab {
        switch (this.oper) {
            case RankOper.Player:
                return this.playerItem
                break
            case RankOper.Attack:
                return this.attackItem
                break
            case RankOper.Defense:
                return this.attackItem
                break
            case RankOper.Village:
                return this.villageItem
                break
            case RankOper.Union:
                return this.unionItem
                break
            case RankOper.Area:

                break
            case RankOper.Activity:

                break
        }
    }

    onClose() {
        UIManager.instance.closeUI(PrefabEnum.RankIndex)
    }

    setActive(btn: Node) {
        this.player.getChildByName('Label').getComponent(Label).color = new Color('#908A81')
        this.village.getChildByName('Label').getComponent(Label).color = new Color('#908A81')
        this.union.getChildByName('Label').getComponent(Label).color = new Color('#908A81')
        this.attack.getChildByName('Label').getComponent(Label).color = new Color('#908A81')
        this.defense.getChildByName('Label').getComponent(Label).color = new Color('#908A81')

        btn.getChildByName('Label').getComponent(Label).color = new Color('#DACAB3')
    }
}


